import React, { Component } from 'react'
// 导入路由
import { Route } from 'react-router-dom'
// 导入路由组件
import Index from '../Index'
import News from '../News'
import HouseList from '../HouseList'
import Profile from '../Profile'
// 导入 TabBar
import { TabBar } from 'antd-mobile'
// 导入组件自己的样式文件
import './index.css'

const tabs = [
  {
    key: '/home',
    title: '首页',
    icon: <i className="iconfont icon-ind" />
  },
  {
    key: '/home/list',
    title: '找房',
    icon: <i className="iconfont icon-findHouse" />
  },
  {
    key: '/home/news',
    title: '资讯',
    icon: <i className="iconfont icon-infom" />
  },
  {
    key: '/home/profile',
    title: '我的',
    icon: <i className="iconfont icon-my" />
  }
]

export default class Home extends Component {
  state = {
    activeKey: ''
  }

  // 渲染TabBar函数
  renderTabBar() {
    return tabs.map(item => <TabBar.Item key={item.key} title={item.title} icon={item.icon} />)
  }

  render() {
    return (
      <div className="home">
        <Route exact path="/home" component={Index} />
        <Route path="/home/list" component={HouseList} />
        <Route path="/home/news" component={News} />
        <Route path="/home/profile" component={Profile} />
        {/* TabBar */}
        <TabBar
          // 根据路由路径切换参数
          activeKey={this.props.location.pathname}
          // 切换面板时，跳转到对应路由
          onChange={value => this.props.history.push(value)}
        >
          {this.renderTabBar()}
        </TabBar>
      </div>
    )
  }
}
